<template>
  <el-container class="app_container flex">
    <Aside @handleNodeClick="handleNodeClick"/>
    <el-main class="app_main flex">
      <Breadcrumb :title="pageTitle"/>
      <div class="app_content">
        <el-form ref="searchMap" class="serach_wrapper flex-space-between" :inline="true" :model="searchMap"
                 @submit.native.prevent>
          <div class="search">
            <el-form-item prop="planName" size="small">
              <el-date-picker v-model="personnelCreateTime" value-format="yyyy-MM-dd HH:mm:ss"
                              type="datetimerange" range-separator="-" start-placeholder="开始日期"
                              end-placeholder="结束日期" @change="splitDate"/>
              <el-input v-model="searchMap.keyword" placeholder="请输入值班人员" clearable @clear="getList()"
                        @keyup.enter.native="getList()" style="width: 200px; margin-left: 10px;"/>
            </el-form-item>
            <el-form-item class="flex">
              <el-button @click="handleSearch()" class="btn_primary">查询</el-button>
              <el-button @click="handleReset()" class="btn_cancel">重置</el-button>
            </el-form-item>
          </div>
          <div class="edit flex">
            <el-button class="btn_primary" icon="el-icon-download" @click="handleExport()">
              导出
            </el-button>
          </div>
        </el-form>
        <el-table :data="dutyList" stripe class="per_table marginb_15" style="width: 100%" :height="winTableH"
                  v-loading="loading">
          <el-table-column type="index" label="序号" header-align="center" align="center" width="80"/>
          <el-table-column prop="projectPointName" label="项目点位" align="center"/>
          <el-table-column prop="installPosition" label="位置" align="center"/>
          <el-table-column prop="nickName" label="值班人员" align="center"/>
          <el-table-column prop="alarmNo" label="报警编号" align="center"/>
          <el-table-column prop="reason" label="事项" align="center"/>
          <el-table-column prop="alarmTime" label="预警时间" align="center" width="180"/>
          <el-table-column prop="handleTime" label="处理时间" align="center" width="180"/>
          <el-table-column prop="" label="处理周期(分钟)" align="center">
            <template slot-scope="scope">
              <span>{{ calculatePeriod(scope.row.handleTime, scope.row.alarmTime) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="备注" align="center" width="350"/>
        </el-table>
        <pagination v-if="total>0" :total="total" :page.sync="searchMap.pageNum" :limit.sync="searchMap.pageSize"
                    @change="getList"/>
      </div>
    </el-main>
  </el-container>
</template>

<script>

import {getDutyList} from "@/views/operation/api/duty";
import Aside from "@/components/Aside/index.vue";

export default {
  data() {
    return {
      // 搜索数据
      searchMap: {
        pageNum: 1, // 当前页
        pageSize: 10,  // 默认条数
        keyword: undefined,
      },
      // 时间
      personnelCreateTime: undefined,
      // 值班人员考核列表
      dutyList: [],
      // 表格加载状态
      loading: false,
      // 条数
      total: 0,
    };
  },
  computed: {
    pageTitle() {
      return '值班人员考核'
    }
  },
  watch: {},
  methods: {
    async getList() {
      this.loading = true;
      const response = await getDutyList(this.searchMap)
      if (response.code === 200) {
        this.dutyList = response.rows
        this.total = response.total
        this.loading = false
      }
    },
    // 查询
    handleSearch() {
      this.getList()
    },
    // 重置
    handleReset() {
      this.searchMap = {
        pageNum: 1, // 当前页
        pageSize: 10,  // 默认条数
        keyword: undefined,
      };
      this.personnelCreateTime = undefined
      this.getList()
    },
    // 树形菜单点击
    handleNodeClick(item) {
      this.searchMap.deptId = item.id
      this.getList()
    },
    // 导出
    handleExport() {
      this.download(
          '/business/dutyCheck/export',
          {
            ...this.searchMap,
          },
          `值班考核${new Date().getTime()}.xlsx`
      );
    },
    // 日期设置
    splitDate(dateTime) {
      this.searchMap.startTime = dateTime[0]
      this.searchMap.endTime = dateTime[1]
    },
    // 计算处理周期
    calculatePeriod(endTime, startTime) {
      const start = new Date(startTime)
      const end = new Date(endTime)
      return Math.ceil((end - start) / 1000 / 60)
    }
  },
  created() {
    this.getList()
  },
  mounted() {

  },
  components: {Aside},
}
</script>

<style lang='less' scoped>

</style>